<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>bootstrap模板页面</title>

        <!-- 新 Bootstrap4 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <script src="./dist/clipboard.min.js"></script>

        <link href="./dist/toastr/toastr.css" rel="stylesheet" />
        <script src="./dist/toastr/toastr.min.js"></script>

        <style>
            body {
                padding: 5px;
                margin: 5px;
            }

            .cbox {
                border: 1px solid blue;
                padding: 1px;
                margin: 1px;
            }

            .chead {
                background: gray;
            }

            .cdata {
                border-bottom: 1px solid black;
            }
        </style>
    </head>

    <body class="container">
        <!-- html bootstrap模板 -->
        <div class="cbox">
            <div class="chead">html bootstrap模板</div>
            <div class="cdata">
                <button type="button" class="btn btn-info" value="html-temp">html framework</button>
            </div>
        </div>

        <!-- Bootstrap4 网格系统 -->
        <div class="cbox">
            <div class="chead">Bootstrap4 网格系统</div>
            <div class="cdata">
                <p>创建3个(最多12个)相等宽度的列!</p>
                <div class="row" id="grid-auto-col3">
                    <div class="col" style="background-color:lavender;">.col</div>
                    <div class="col" style="background-color:orange;">.col</div>
                    <div class="col" style="background-color:lavender;">.col</div>
                </div>
                <button type="button" class="btn btn-info" value="grid-auto-col3">复制</button>
            </div>
            <div class="cdata">
                <p>在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版</p>
                <div class="row" id="grid-auto-col2-sm">
                    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
                    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
                </div>
                <button type="button" class="btn btn-info" value="grid-auto-col2-sm">复制</button>
            </div>
            <div class="cdata">
                <p>在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%</p>
                <div class="row" id="grid-auto-col2">
                    <div class="col-sm-3 col-md-6 bg-success">col-sm-3 col-md-6</div>
                    <div class="col-sm-9 col-md-6 bg-warning">col-sm-9 col-md-6</div>
                </div>
                <button type="button" class="btn btn-info" value="grid-auto-col2">复制</button>
            </div>
        </div>

        <!-- Bootstrap4 文字排版 -->
        <div class="cbox">
            <div class="chead">Bootstrap4 文字排版, Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5</div>
            <div class="cdata">
                <h1 id="txt-h1">h1 Bootstrap 标题 (2.5rem = 40px)</h1>
                <h2 id="txt-h2">h2 Bootstrap 标题 (2rem = 32px)</h2>
                <h3 id="txt-h3">h3 Bootstrap 标题 (1.75rem = 28px)</h3>
                <h4 id="txt-h4">h4 Bootstrap 标题 (1.5rem = 24px)</h4>
                <h5 id="txt-h5">h5 Bootstrap 标题 (1.25rem = 20px)</h5>
                <h6 id="txt-h6">h6 Bootstrap 标题 (1rem = 16px)</h6>
                <button type="button" class="btn btn-info" value="txt-h1">h1</button>
                <button type="button" class="btn btn-info" value="txt-h2">h2</button>
                <button type="button" class="btn btn-info" value="txt-h3">h3</button>
                <button type="button" class="btn btn-info" value="txt-h4">h4</button>
                <button type="button" class="btn btn-info" value="txt-h5">h5</button>
                <button type="button" class="btn btn-info" value="txt-h6">h6</button>
            </div>
            <div>
                <h1 id="display4-small" class="display-4">Display 4 ---<small>副标题</small></h1>
                <button type="button" class="btn btn-info" value="display4-small">复制</button>
                <p id="mark-abbr-kbd">添加<mark>高亮</mark>文本。The <abbr title="World Health Organization">WHO</abbr> was
                    founded in 1948. Use
                    <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
                <button type="button" class="btn btn-info" value="mark-abbr-kbd">复制</button>
                <blockquote id="my-blockquote" class="blockquote">
                    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation
                        organization...</p>
                    <footer class="blockquote-footer">From WWF's website</footer>
                </blockquote>
                <button type="button" class="btn btn-info" value="my-blockquote">复制</button>
                <dl id="my-dl">
                    <dt>Coffee</dt>
                    <dd>- black hot drink</dd>
                    <dt>Milk</dt>
                    <dd>- white cold drink</dd>
                </dl>
                <button type="button" class="btn btn-info" value="my-dl">复制</button>
            </div>
        </div>

        <!-- 颜色 -->
        <div class="cbox">
            <div class="chead">颜色：文本颜色，背景颜色</div>
            <div class="cdata">
                <p>代表指定意义的文本颜色</p>
                <p class="text-muted">柔和的文本。</p>
                <p class="text-primary">重要的文本。</p>
                <p class="text-success">执行成功的文本。</p>
                <p class="text-info">代表一些提示信息的文本。</p>
                <p class="text-warning">警告文本。</p>
                <p class="text-danger">危险操作文本。</p>
                <p class="text-secondary">副标题。</p>
                <p class="text-dark">深灰色文字。</p>
                <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
                <p class="text-white">白色文本（白色背景上看不清楚）。</p>
            </div>
            <div class="cdata">
                <p>鼠标移动到链接。</p>
                <a href="#" class="text-muted">柔和的链接。</a>
                <a href="#" class="text-primary">主要链接。</a>
                <a href="#" class="text-success">成功链接。</a>
                <a href="#" class="text-info">信息文本链接。</a>
                <a href="#" class="text-warning">警告链接。</a>
                <a href="#" class="text-danger">危险链接。</a>
                <a href="#" class="text-secondary">副标题链接。</a>
                <a href="#" class="text-dark">深灰色链接。</a>
                <a href="#" class="text-light">浅灰色链接。</a>
            </div>
            <div class="cdata">
                <p>背景颜色</p>
                <p class="bg-primary text-white">重要的背景颜色。</p>
                <p class="bg-success text-white">执行成功背景颜色。</p>
                <p class="bg-info text-white">信息提示背景颜色。</p>
                <p class="bg-warning text-white">警告背景颜色</p>
                <p class="bg-danger text-white">危险背景颜色。</p>
                <p class="bg-secondary text-white">副标题背景颜色。</p>
                <p class="bg-dark text-white">深灰背景颜色。</p>
                <p class="bg-light text-dark">浅灰背景颜色。</p>
            </div>
        </div>

        <!-- 表格 -->
        <div class="cbox">
            <div class="chead">表格</div>
            <div class="cdata">
                <p>基本表格</p>
                <table class="table" id="table1">
                    <thead>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Doe</td>
                            <td>john@example.com</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Moe</td>
                            <td>mary@example.com</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-info" value="table1">复制</button>
            </div>
            <div class="cdata">
                <p>条纹表格</p>
                <table class="table table-striped" id="table2">
                    <thead>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Doe</td>
                            <td>john@example.com</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Moe</td>
                            <td>mary@example.com</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-info" value="table2">复制</button>
            </div>
            <div class="cdata">
                <p>带边框表格</p>
                <table class="table table-bordered" id="table3">
                    <thead>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Doe</td>
                            <td>john@example.com</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-info" value="table3">复制</button>
            </div>
            <div class="cdata">
                <p>鼠标悬停状态表格</p>
                <table class="table table-hover" id="table4">
                    <thead>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Doe</td>
                            <td>john@example.com</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Moe</td>
                            <td>mary@example.com</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-info" value="table4">复制</button>
            </div>
            <div class="cdata">
                <p>指定意义的颜色类</p>
                <table class="table" id=table5>
                    <thead>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Default</td>
                            <td>Defaultson</td>
                            <td>def@somemail.com</td>
                        </tr>
                        <tr class="table-primary">
                            <td>Primary</td>
                            <td>Joe</td>
                            <td>joe@example.com</td>
                        </tr>
                        <tr class="table-success">
                            <td>Success</td>
                            <td>Doe</td>
                            <td>john@example.com</td>
                        </tr>
                        <tr class="table-danger">
                            <td>Danger</td>
                            <td>Moe</td>
                            <td>mary@example.com</td>
                        </tr>
                        <tr class="table-info">
                            <td>Info</td>
                            <td>Dooley</td>
                            <td>july@example.com</td>
                        </tr>
                        <tr class="table-warning">
                            <td>Warning</td>
                            <td>Refs</td>
                            <td>bo@example.com</td>
                        </tr>
                        <tr class="table-active">
                            <td>Active</td>
                            <td>Activeson</td>
                            <td>act@example.com</td>
                        </tr>
                        <tr class="table-secondary">
                            <td>Secondary</td>
                            <td>Secondson</td>
                            <td>sec@example.com</td>
                        </tr>
                        <tr class="table-light">
                            <td>Light</td>
                            <td>Angie</td>
                            <td>angie@example.com</td>
                        </tr>
                        <tr class="table-dark text-dark">
                            <td>Dark</td>
                            <td>Bo</td>
                            <td>bo@example.com</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-info" value="table5">复制</button>
            </div>
            <div class="cdata">
                <p>较小的表格</p>
                <table class="table table-bordered table-sm" id="table6">
                    <thead>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Doe</td>
                            <td>john@example.com</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Moe</td>
                            <td>mary@example.com</td>
                        </tr>
                        <tr>
                            <td>July</td>
                            <td>Dooley</td>
                            <td>july@example.com</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-info" value="table6">复制</button>
            </div>
        </div>

        <!-- Bootstrap4 图像形状 -->
        <div class="cbox">
            <div class="chead">Bootstrap4 图像形状</div>
            <div class="cdata">
                <p>.rounded 类可以让图片显示圆角效果：</p>
                <img id="pic1" src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded"
                    alt="Cinque Terre" width="304" height="236">
                <button type="button" class="btn btn-info" value="pic1">复制</button>
                <p>.rounded-circle 类可以设置椭圆形图片:</p>
                <img id="pic2" src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded-circle"
                    alt="Cinque Terre">
                <button type="button" class="btn btn-info" value="pic2">复制</button>
                <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>
                <img id="pic3" src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-thumbnail"
                    alt="Cinque Terre">
                <button type="button" class="btn btn-info" value="pic3">复制</button>
            </div>
        </div>

        <!-- jumbotron -->
        <div class="cbox">
            <div class="chead">jumbotron</div>
            <div class="cdata">
                <div class="jumbotron" id="myjum">
                    <h1>菜鸟教程</h1>
                    <p>学的不仅是技术，更是梦想！！！</p>
                </div>
                <p>这是一些文本。</p>
                <p>这是一些文本。</p>
                <button type="button" class="btn btn-info" value="myjum">复制</button>
            </div>
        </div>

        <!-- 信息提示框 -->
        <div class="cbox">
            <div class="chead">信息提示框</div>
            <div class="cdata">
                <p>我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert"
                    类来设置提示框的关闭操作。.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果</p>
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>成功!</strong> 指定操作成功提示信息。
                </div>
                <div class="alert alert-info alert-dismissible  fade show">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>信息!</strong> 请注意这个信息 fade show。
                </div>
                <div class="alert alert-warning alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>警告!</strong> 设置警告信息。
                </div>
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>错误!</strong> 失败的操作。
                </div>
                <div class="alert alert-primary alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>首选!</strong> 这是一个重要的操作信息。
                </div>
                <div class="alert alert-secondary alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>次要的!</strong> 显示一些不重要的信息。
                </div>
                <div class="alert alert-dark alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>深灰色!</strong> 深灰色提示框。
                </div>
                <div class="alert alert-light alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>浅灰色!</strong>浅灰色提示框。
                </div>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="cbox">
            <div class="chead">按钮，按钮类可用于 a,button,或input元素上</div>
            <div class="cdata">
                <p>button元素</p>
                <button type="button" class="btn">基本按钮</button>
                <button type="button" class="btn btn-primary">主要按钮</button>
                <button type="button" class="btn btn-secondary">次要按钮</button>
                <button type="button" class="btn btn-success">成功</button>
                <button type="button" class="btn btn-info">信息</button>
                <button type="button" class="btn btn-warning">警告</button>
                <button type="button" class="btn btn-danger">危险</button>
                <button type="button" class="btn btn-dark">黑色</button>
                <button type="button" class="btn btn-light">浅色</button>
                <button type="button" class="btn btn-link">链接</button>
                <p>按钮大小</p>
                <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
                <button type="button" class="btn btn-primary">默认按钮</button>
                <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
                <p>激活和禁用的按钮</p>
                <button type="button" class="btn btn-primary active">点击后的按钮</button>
                <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
                <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
            </div>
            <div class="cdata">
                <p>按钮设置边框</p>
                <button type="button" class="btn btn-outline-primary">主要按钮</button>
                <button type="button" class="btn btn-outline-secondary">次要按钮</button>
                <button type="button" class="btn btn-outline-success">成功</button>
                <button type="button" class="btn btn-outline-info">信息</button>
                <button type="button" class="btn btn-outline-warning">警告</button>
                <button type="button" class="btn btn-outline-danger">危险</button>
                <button type="button" class="btn btn-outline-dark">黑色</button>
                <button type="button" class="btn btn-outline-light text-dark">浅色</button>
            </div>
            <div class="cdata">
                <p>按钮组</p>
                <h5>大按钮:</h5>
                <div class="btn-group btn-group-lg">
                    <button type="button" class="btn btn-primary">Apple</button>
                    <button type="button" class="btn btn-primary">Samsung</button>
                    <button type="button" class="btn btn-primary">Sony</button>
                </div>
                <h5>默认垂直按钮:</h5>
                <div class="btn-group-vertical">
                    <button type="button" class="btn btn-primary">Apple</button>
                    <button type="button" class="btn btn-primary">Samsung</button>
                    <button type="button" class="btn btn-primary">Sony</button>
                </div>
                <h5>小按钮附带下拉按钮:</h5>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-primary">Apple</button>
                    <button type="button" class="btn btn-primary">Samsung</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle"
                            data-toggle="dropdown">Sony</button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Tablet</a>
                            <a class="dropdown-item" href="#">Smartphone</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cdata">
                <p>.dropdown向下，.dropup 类用于设置下拉菜单向上弹出</p>
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        Dropdown button
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Another link</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 徽章 -->
        <div class="cbox">
            <div class="chead">徽章</div>
            <div class="cdata">
                <p>各种颜色类型的徽章</p>
                <span class="badge badge-primary">主要</span>
                <span class="badge badge-secondary">次要</span>
                <span class="badge badge-success">成功</span>
                <span class="badge badge-danger">危险</span>
                <span class="badge badge-warning">警告</span>
                <span class="badge badge-info">信息</span>
                <span class="badge badge-light">浅色</span>
                <span class="badge badge-dark">深色</span>
                <p>药丸形状徽章</p>
                <span class="badge badge-pill badge-default">默认</span>
                <span class="badge badge-pill badge-primary">主要</span>
                <span class="badge badge-pill badge-success">成功</span>
                <p>徽章插入到元素内</p>
                <button type="button" class="btn btn-primary">
                    Messages <span class="badge badge-light">4</span>
                </button>
            </div>
        </div>

        <!-- 进度条 -->
        <div class="cbox">
            <div class="chead">进度条</div>
            <div class="cdata">
                <p>各种颜色类型的进度条</p>
                <div class="progress">
                    <div class="progress-bar" style="width:30%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-success" style="width:40%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-info" style="width:50%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-warning" style="width:60%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-danger" style="width:70%"></div>
                </div>
                <p>条纹的进度条</p>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
                </div>
                <p>进度条可以设置多种颜色:</p>
                <div class="progress">
                    <div class="progress-bar bg-success" style="width:40%">
                        Free Space
                    </div>
                    <div class="progress-bar bg-warning" style="width:10%">
                        Warning
                    </div>
                    <div class="progress-bar bg-danger" style="width:20%">
                        Danger
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页与面包屑导航 -->
        <div class="cbox">
            <div class="chead">分页与面包屑导航</div>
            <div class="cdata">
                <p>当前页可以使用 .active 类来高亮显示：</p>
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
                <p>.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：</p>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Photos</a></li>
                    <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
                    <li class="breadcrumb-item"><a href="#">Italy</a></li>
                    <li class="breadcrumb-item active">Rome</li>
                </ul>
            </div>
        </div>

        <!-- 分组 -->
        <div class="cbox">
            <div class="chead">分组</div>
            <div class="cdata">
                <p>ul分组</p>
                <ul class="list-group" id="my-ul-group">
                    <li class="list-group-item disabled">Disabled item</li>
                    <li class="list-group-item">Second item</li>
                    <li class="list-group-item">Third item</li>
                </ul>
                <button type="button" class="btn btn-info" value="my-ul-group">复制</button>
                <p>带颜色的div分组</p>
                <div class="list-group" id="my-div-group">
                    <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
                    <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
                    <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
                    <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
                    <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
                    <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
                    <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
                    <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
                    <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
                </div>
                <button type="button" class="btn btn-info" value="my-div-group">复制</button>
            </div>
        </div>

        <!-- 卡片 -->
        <div class="cbox">
            <div class="chead">卡片</div>
            <div class="cdata">
                <p>基础卡片</p>
                <div class="card" id="my-card-1">
                    <div class="card-header">头部</div>
                    <div class="card-body">内容</div>
                    <div class="card-footer">底部</div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-1">复制</button>
            </div>
            <div class="cdata">
                <p>多种颜色卡片</p>
                <div class="card" id="my-card-c-1">
                    <div class="card-body">Basic card</div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-c-1">复制</button>
                <div class="card bg-primary text-white" id="my-card-c-2">
                    <div class="card-body">Primary card</div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-c-2">复制</button>
                <div class="card bg-success text-white" id="my-card-c-3">
                    <div class="card-body">Success card</div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-c-3">复制</button>
                <div class="card bg-info text-white" id="my-card-c-4">
                    <div class="card-body">Info card</div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-c-4">复制</button>
            </div>
            <div class="cdata">
                <p>图片在头部 (card-img-top):</p>
                <div class="card" style="width:400px" id="my-card-2">
                    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image"
                        style="width:100%">
                    <div class="card-body">
                        <h4 class="card-title">John Doe</h4>
                        <p class="card-text">Some example text some example text. John Doe is an architect and engineer
                        </p>
                        <a href="#" class="btn btn-primary">See Profile</a>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-2">复制</button>
            </div>
            <div class="cdata">
                <p>图片作为背景:</p>
                <div class="card img-fluid" style="width:500px" id="my-card-3">
                    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image"
                        style="width:100%">
                    <div class="card-img-overlay">
                        <h4 class="card-title">John Doe</h4>
                        <p class="card-text">Some example text some example text. Some example text some example text.
                            Some example text some example text. Some example text some example text.</p>
                        <a href="#" class="btn btn-primary">See Profile</a>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="my-card-3">复制</button>
            </div>
        </div>

        <!-- 折叠 -->
        <div class="cbox">
            <div class="chead">折叠</div>
            <div class="cdata">
                <p>简单折叠，点击按钮内容会再显示与隐藏之间切换。</p>
                <div id="zhedie1">
                    <button type="button" class="btn btn-primary" data-toggle="collapse"
                        data-target="#demo">简单的折叠</button>
                    <div id="demo" class="collapse">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="zhedie1">复制</button>
                <p>复杂折叠</p>
                <div id="zhedie2">
                    <p><strong>注意:</strong> 使用 <strong>data-parent</strong>
                        属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。</p>
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header">
                                <a class="card-link" data-toggle="collapse" href="#collapseOne">选项一</a>
                            </div>
                            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                <div class="card-body">
                                    #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">选项二</a>
                            </div>
                            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">选项三</a>
                            </div>
                            <div id="collapseThree" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    #3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="zhedie2">复制</button>
            </div>
        </div>

        <!-- 导航 -->
        <div class="cbox">
            <div class="chead">导航</div>
            <div class="cdata">
                <p>动态选项卡</p>
                <div id="nav-tab-1">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active container" id="home">tab1</div>
                        <div class="tab-pane container" id="menu1">tab2</div>
                        <div class="tab-pane container" id="menu2">tab3</div>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="nav-tab-1">复制</button>
            </div>
            <div class="cdata">
                <p>胶囊状动态选项卡</p>
                <div id="nav-tab-2">
                    <!-- Nav pills -->
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="pill" href="#home2">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#menu12">Menu 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#menu22">Menu 2</a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active container" id="home2">tab1</div>
                        <div class="tab-pane container" id="menu12">tab2</div>
                        <div class="tab-pane container" id="menu22">tab3</div>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="nav-tab-2">复制</button>
            </div>
        </div>

        <!-- 导航栏 -->
        <div class="cbox">
            <div class="chead">导航栏</div>
            <div class="cdata">
                <p>水平导航栏</p>
                <div id="nav-1">
                    <!-- 小屏幕上水平导航栏会切换为垂直的 -->
                    <nav class="navbar navbar-expand-sm bg-light">
                        <!-- Links -->
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 2</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 3</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <button type="button" class="btn btn-info" value="nav-1">复制</button>
            </div>
            <div class="cdata">
                <p>竖直导航栏</p>
                <div id="nav-2">
                    <!-- 垂直导航栏 -->
                    <nav class="navbar bg-light">

                        <!-- Links -->
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 2</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 3</a>
                            </li>
                        </ul>

                    </nav>
                </div>
                <button type="button" class="btn btn-info" value="nav-2">复制</button>
            </div>
            <div class="cdata">
                <p>带LOGO</p>
                <div id="nav-3">
                    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                        <!-- Brand/logo -->
                        <a class="navbar-brand" href="#">Logo</a>

                        <!-- Links -->
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 2</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link 3</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <button type="button" class="btn btn-info" value="nav-3">复制</button>
            </div>
            <div class="cdata">
                <h3>折叠导航栏</h3>
                <p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
                <p>提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。</p>
                <div id="nav-4">
                    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
                        <a class="navbar-brand" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#collapsibleNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="collapsibleNavbar">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Link</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <button type="button" class="btn btn-info" value="nav-4">复制</button>
            </div>
            <div class="cdata">
                <p>带搜索按钮的导航栏</p>
                <div id="nav-5">
                    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                        <form class="form-inline">
                            <input class="form-control" type="text" placeholder="Search">
                            <button class="btn btn-success" type="button">Search</button>
                        </form>
                        <!-- Navbar text-->
                        <span class="navbar-text">
                            Navbar text
                        </span>
                    </nav>
                </div>
                <button type="button" class="btn btn-info" value="nav-5">复制</button>
            </div>
            <div class="cdata">
                <p>固定位置导航栏，导航栏可以固定在头部或者底部</p>
                <div id="nav-6">
                    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
                        <a class="navbar-brand" href="#">Logo</a>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <button type="button" class="btn btn-info" value="nav-6">复制</button>
            </div>
        </div>

        <!-- 表单和表单控件 -->
        <div class="cbox">
            <div class="chead">表单和表单控件</div>
            <div class="cdata">
                <p>堆叠表单</p>
                <form id="my-form1">
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                <button type="button" class="btn btn-info" value="my-form1">复制</button>
                <p>内联表单</p>
                <form class="form-inline" id="my-form2">
                    <label for="email">Email address:</label>
                    <input type="email" class="form-control" id="email">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd">
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                <button type="button" class="btn btn-info" value="my-form2">复制</button>
            </div>
            <div class="cdata">
                <p>表单控件</p>
                <div class="form-group">
                    <label for="usr">用户名:</label>
                    <input type="text" class="form-control" id="usr">
                </div>
                <div class="form-group">
                    <label for="pwd">密码:</label>
                    <input type="password" class="form-control" id="pwd">
                </div>
                <div class="form-group">
                    <label for="comment">评论:</label>
                    <textarea class="form-control" rows="5" id="comment"></textarea>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" value="">Option 1
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" value="">Option 2
                    </label>
                </div>
                <div class="form-check disabled">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" value="" disabled>Option 3
                    </label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">Option 1</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">Option 2</label>
                </div>
                <div class="radio disabled">
                    <label><input type="radio" name="optradio" disabled>Option 3</label>
                </div>
                <div class="form-group">
                    <label for="sel1">下拉菜单:</label>
                    <select class="form-control" id="sel1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
            </div>
            <div class="cdata">
                <p>输入框组</p>
                <form>
                    <label for="demo">这里输入您的邮箱:</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
                        <div class="input-group-append">
                            <span class="input-group-text">@runoob.com</span>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Search">
                        <div class="input-group-append">
                            <button class="btn btn-success" type="submit">Go</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="cdata">
                <div class="container mt-3">
                    <h4>自定义滑块控件</h4>
                    <p>我们可以在 input 为 type="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件:</p>
                    <form action="/action_page.php">
                        <label for="customRange">自定义滑块控件</label>
                        <input type="range" class="custom-range" id="customRange" name="points1">
                        <label for="defaultRange">默认滑块控件</label>
                        <input type="range" id="defaultRange" name="points2">
                        <p><button type="submit" class="btn btn-primary">提交</button></p>
                    </form>
                </div>
            </div>
            <div class="cdata">
                <div class="container mt-3">
                    <h4>自定义文件上传控件</h4>
                    <p>我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type="file" 并添加 .custom-control-label:</p>
                    <form action="/action_page.php">
                        <p>自定义上传文件样式:</p>
                        <div class="custom-file mb-3">
                            <input type="file" class="custom-file-input" id="customFile" name="filename">
                            <label class="custom-file-label" for="customFile">选择文件</label>
                        </div>
                        <p>默认上传文件样式:</p>
                        <input type="file" id="myFile" name="filename2">
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 轮播 -->
        <div class="cbox">
            <div class="chead">轮播</div>
            <div class="cdata">
                <div id="my-carousel-demo" class="carousel slide" data-ride="carousel">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#my-carousel-demo" data-slide-to="0" class="active"></li>
                        <li data-target="#my-carousel-demo" data-slide-to="1"></li>
                        <li data-target="#my-carousel-demo" data-slide-to="2"></li>
                    </ul>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" width="100%"
                                height="100%">
                            <div class="carousel-caption">
                                <h3>第一张图片描述标题</h3>
                                <p>描述文字!</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" width="100%"
                                height="100%">
                            <div class="carousel-caption">
                                <h3>第二张图片描述标题</h3>
                                <p>描述文字!</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" width="100%"
                                height="100%">
                            <div class="carousel-caption">
                                <h3>第三张图片描述标题</h3>
                                <p>描述文字!</p>
                            </div>
                        </div>
                    </div>
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#my-carousel-demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#my-carousel-demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
                <button type="button" class="btn btn-info" value="my-carousel-demo">复制</button>
            </div>
        </div>

        <!-- 模态框 -->
        <div class="cbox">
            <div class="chead">模态框</div>
            <div class="cdata">
                <div id="my-modal">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                        打开模态框
                    </button>
                    <!-- 模态框 -->
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">模态框头部</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    模态框内容..
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="my-modal">复制</button>
            </div>
        </div>

        <!-- 说明性提示框 -->
        <div class="cbox">
            <div class="chead">说明性提示框</div>
            <div class="cdata">
                <p>注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。</p>
                <div id="my-tip-box">
                    <a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
                </div>
                <button type="button" class="btn btn-info" value="my-tip-box">复制</button>
            </div>
        </div>

        <!-- 说明性弹出框 -->
        <div class="cbox">
            <div class="chead">说明性弹出框</div>
            <div class="cdata">
                <p>注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。</p>
                <div id="my-pop-box">
                    <a href="javascript:void(0)" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
                </div>
                <button type="button" class="btn btn-info" value="my-pop-box">复制</button>
            </div>
        </div>

        <!-- 滚动监听 -->
        <div class="cbox">
            <div class="chead">滚动监听</div>
            <div class="cdata">
                <p>有几处关联id要注意</p>
                <div data-spy="scroll" data-target="#myScrollspy" data-offset="1" id="myscroll">
                    <div class="container-fluid">
                        <div class="row">
                            <!-- 导航栏 -->
                            <nav class="col-sm-3 col-4" id="myScrollspy">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#section1">Section 1</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#section2">Section 2</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#section3">Section 3</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section
                                            4</a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#section41">Link 1</a>
                                            <a class="dropdown-item" href="#section42">Link 2</a>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                            <!-- 内容 -->
                            <div class="col-sm-9 col-8">
                                <div id="section1" class="bg-success" style="height: 300px">
                                    <h1>Section 1</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                                </div>
                                <div id="section2" class="bg-warning" style="height: 300px">
                                    <h1>Section 2</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                                </div>
                                <div id="section3" class="bg-secondary" style="height: 300px">
                                    <h1>Section 3</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                                </div>
                                <div id="section41" class="bg-danger" style="height: 300px">
                                    <h1>Section 4-1</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                                </div>
                                <div id="section42" class="bg-info" style="height: 300px">
                                    <h1>Section 4-2</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-info" value="myscroll">复制</button>
            </div>
        </div>
    </body>

    <script>
        let fuckScipt = "</s" + "cript>";
        let file_content = `<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>bootstrap模板页面html-temp</title>

        <!-- 新 Bootstrap4 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">${fuckScipt}
        <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">${fuckScipt}
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">${fuckScipt}
    </head>

    <body>

    </body>
</html>`;
        function copyHtml(id) {
            if (id === "html-temp") {
                return file_content;
            } else {
                let txt = $("#" + id).prop("outerHTML");
                return txt;
            }
        }

        $(document).ready(function () {
            console.log('document all ready.');

            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();

            toastr.options = {
                closeButton: false,
                debug: false,
                progressBar: false,
                positionClass: "toast-bottom-center",
                onclick: null,
                showDuration: "300",
                hideDuration: "1500",
                timeOut: "1000",
                extendedTimeOut: "1000",
                showEasing: "swing",
                hideEasing: "linear",
                showMethod: "fadeIn",
                hideMethod: "fadeOut"
            };

            let clipboard = new ClipboardJS('.btn', {
                text: function (trigger) {
                    let txt = copyHtml(trigger.value);
                    console.log(txt);
                    console.log(trigger.value);
                    if (txt.indexOf(trigger.value) != -1) {
                        toastr.success('copy that.');
                        return txt;
                    } else {
                        return 'error';
                    }
                }
            });
            clipboard.on('success', function (e) {
                console.log(e);
            });
            clipboard.on('error', function (e) {
                console.log(e);
            });
        });
    </script>

</html>
